<template>
  <div class="carousel">
    <div
      class="carousel-inner"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
    >
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item.src" :alt="item.alt" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="calrousel-footer" :style="{ '--a': currentItem.bgColor }">
      <div class="footer-main">
        <!-- 标题容器 -->
        <div>
          <!-- 标题 -->
          <div
            class="carousel-title"
            v-for="(item, index) in items"
            :key="index"
          >
            <div class="ellipsis" v-if="currentIndex == index">
              {{ item.title }}
            </div>
          </div>
          <!-- 切换按钮 -->
          <div class="carousel-control">
            <a class="carousel-control-prev" @click="prev">
              <img
                src="@/assets/svg/ic_public_arrow_left_filled.svg"
              />
            </a>
            <a class="carousel-control-next" @click="next">
              <img
                src="@/assets/svg/ic_public_arrow_right_filled.svg"
              />
            </a>
          </div>
        </div>
        <!-- 选择项 -->
        <div class="carousel-indicators">
          <span
            v-for="(item, index) in items"
            :key="index"
            :class="{ active: index === currentIndex }"
            @click="goto(index)"
          >
            <div class="pacman"></div>
            <div class="pacman"></div>
          </span>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      currentIndex: 0, // 当前显示的图片索引
      items: [
        {
          src: require("@/assets/img/home/swiper/001.png"),
          link: "#",
          title: "测试标题1测试标题1测试标题1测试标题1测试标题1测试标题1",
          bgColor: "84, 101, 71", // rgb颜色数值
        },
        {
          src: require("@/assets/img/home/swiper/002.jpg"),
          link: "#",
          title: "测试标题2测试标题2测试标题2测试标题2",
          bgColor: "94, 107, 111", // rgb颜色数值
        },
        {
          src: require("@/assets/img/home/swiper/003.png"),
          link: "#",
          title: "测试标题3测试标题3测试标题3测试标题3测试标题3",
          bgColor: "135, 143, 164", // rgb颜色数值
        },
        {
          src: require("@/assets/img/home/swiper/004.png"),
          link: "#",
          title: "测试标题4测sfafdadafdsfadfafdafsfafaf",
          bgColor: "48, 54, 127", // rgb颜色数值
        },
        {
          src: require("@/assets/img/home/swiper/005.png"),
          link: "#",
          title: "测试标题5测试标题5测试标题5测试标题5",
          bgColor: "188, 154, 120", // rgb颜色数值
        },
      ],
      isManualPause: false, // 是否手动暂停轮播
    };
  },
  computed: {
    currentItem() {
      return this.items[this.currentIndex];
    },
  },
  mounted() {
    this.runInv();
  },
  beforeDestroy() {
    this.stopCarousel();
  },
  methods: {
    next() {
      if (this.currentIndex === this.items.length - 1) {
        // 如果是最后一张图片，先将currentIndex设置为第一张图片的索引
        this.currentIndex = 0;
        
      } else {
        // 不是最后一张图片，直接更新currentIndex
        this.currentIndex++;
      }
    },
    prev() {
      this.currentIndex =
        (this.currentIndex - 1 + this.items.length) % this.items.length; // 使用取模运算实现循环
    },
    goto(index) {
      if (this.currentIndex !== index) {
        this.stopCarousel(); // 停止自动轮播
        this.currentIndex = index; // 更新当前索引
        this.isManualPause = true; // 设置手动暂停标志
        setTimeout(() => {
          if (this.isManualPause) {
            this.runInv(); // 5秒后重启自动轮播
            this.isManualPause = false; // 重置手动暂停标志
          }
        }, 5000); // 设置延时为5秒
      }
    },
    //定时器自动轮播
    runInv() {
      //定时器轮播图
      this.timer = setInterval(() => {
        this.next();
      }, 3000);
    },
    stopCarousel() {
      clearInterval(this.timer);
    },
  },
};
</script>

<style>
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.carousel-item {
  min-width: 100%; /* 使得每个item的宽度等于carousel的宽度 */
}

.carousel-item img {
  width: 100%;
  display: block;
}

.carousel-control {
  position: absolute;
  display: flex;
  top: 20px;
  right: 40px;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  width: 20px;
  height: 22px;
  color: white;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 3px 4px 3px 4px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.carousel-control-prev {
  left: -40px;
}

.carousel-control-next {
  left: 0px;
}

.carousel-indicators {
  position: absolute;
  display: flex;
  align-items: center;
  width: auto;
  height: 14px;
  line-height: 14px;
  bottom: 20px;
  left: 70px;
  transform: translateX(-50%);
}

.carousel-indicators span {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-indicators span.active {
  background-color: transparent; /* 将背景颜色设置为透明，以便显示.pacman动画 */
  animation: pacman-bite 0.5s infinite;
}

/* 定义吃豆子动画 */
@keyframes pacman-bite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.carousel-indicators span.active .pacman {
  display: block;
}

.pacman {
  display: none;
  position: absolute;
  width: 0px;
  height: 0px;
  top: -4px;
  left: -4px;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  border-left: 8px solid #fff;
  border-bottom: 8px solid #fff;
  border-radius: 50%;
}

.carousel-indicators span.active .pacman:nth-child(1) {
  animation: rotate_up 0.5s infinite;
}

.carousel-indicators span.active .pacman:nth-child(2) {
  animation: rotate_down 0.5s infinite;
}

@keyframes rotate_up {
  0% {
    transform: rotate(-90deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}

@keyframes rotate_down {
  0% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.calrousel-footer {
  position: relative;
  height: 85px;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(var(--a), 1),
    /* 底部深色 */ rgba(var(--a), 1),
    /* 中间颜色，半透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */
  );
}
.footer-main {
  position: relative;
  z-index: 99;
  height: 85px;
}

.carousel-title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 18px;
  color: #fff;
  width: 350px; /* 设置容器的最大宽度 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 130px;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--a), 1),
    /* 底部深色 */ rgba(var(--a), 0.9),
    /* 中间颜色，半透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */ rgba(var(--a), 1),
    /* 另一个中间颜色，更透明 */ rgba(var(--a), 0) /* 顶部透明 */
  );
}

.ellipsis {
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 确保文本在一行内显示 */
}
</style>